<template>
    <div class="container">


        <van-nav-bar @click-left="onClickRight" @click-right="onClickRight">
            <template #left>
                <van-icon name="arrow-left" size="23" color="#fff" />
            </template>

            <template #title>
                <div style="color:#ffffff">{{goodsdetail.detail.title}}</div>
            </template>

            <template #right>
                <van-icon name="cross" size="23" color="#ebe6e6" />
            </template>
        </van-nav-bar>
        <!-- <div class="user1">
            <img class="user_img" src="@/assets/user.png" />
        </div> -->
        <div class="topswiper">
            <goods-swiper :banners="banners"></goods-swiper>
        </div>

        <div class="product-box">
          <!--  <div class="price-box">
                <p class="price">
                    <span class="cur-price"><small>￥</small>{{goodsdetail.detail.price}}</span>
                </p>
            </div>-->
            <div class="product-tag jsTag"></div>
            <h2 class="product-name-box"><span class="prod-name">{{goodsdetail.detail.title}}</span></h2>
            <p class="desc">{{goodsdetail.detail.description}}</p>
          <!--  <div class="more"><a href="#"><br>{{$t('shop.info.moreprops')}}&gt;&gt;</a></div>-->
        </div>


        <div class="detail-box" id="anchorImg">
            <div class="detail-imgs-box">
                <div class="detail-title">{{$t('shop.info.detailtitle')}}</div>
                <div class="detail-imgs-box-cont">
                    <div class="conhtml" v-html="goodsdetail.detail.details"></div>
                </div>
            </div>
        </div>

        <div class="detail-box" id="anchorStand">
            <div class="detail-title">{{$t('shop.info.like')}}</div>
            <div class="detail-standard">
                <div class="goodslist">
                    <div class="content"  v-if="goodsdetail.like_goods.length >0">
                        <van-card
                                v-for="item in goodsdetail.like_goods" :key="item.id"
                                :tag="item.is_recommend == 1 ? $t('shop.info.recommend') : ''"
                                :num="item.sales"
                                desc=""
                                :title="item.title"
                                @click="itemClick(item.id)"
                        >

                            <template #thumb>
                                <div class="thumb"><img v-lazy="item.cover_url" alt=""></div>
                            </template>
                            <template #desc>
                                <div class="desc">{{item.description}}</div>
                            </template>
                            <template #price>
                              <!--  <div class="sales"><small>￥</small>{{item.price+'.00'}}</div>-->
                                <div class="sales"> <van-icon name="clock-o" /> {{item.updated_at.substr(0,10)}}</div>
                            </template>
                        </van-card>

                    </div>

                    <div v-else style="text-align:center;font-size:14px;padding-top:60px;">
                        <span style="color:#EFEFEF">{{$t('shop.info.nogoods')}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


    import GoodsSwiper from './ChildComps/goodsSwiper'
    import {getDetail} from "network/detail";
    import i18n from '@/i18n';


    export default {
        name: 'DetailC',
        components:{
            GoodsSwiper
        },
        data() {
            return {
                id:null,
               /* banners:[
                    {id:1, img_url:'@/assets/h1.png'},
                    {id:2, img_url:'@/assets/h1.png'},
                    {id:3, img_url:'@/assets/h1.png'},
                    {id:4, img_url:'@/assets/h1.png'},
                ],*/

                goodsdetail: {
                    detail:{},
                    like_goods:[]
                }
            };
        },

        computed: {
            banners() {

               const str = this.goodsdetail.detail.cover;

            //    const str='{"a":"1718449107781969.png","b":"1718449111771213.jpg","c":"1718449116327791.png","d":"","e":""}';

                 const nstr = ' '+str+' ';

                 const nnstr = nstr.trim();


                 const arrs = new Array();

                 let i=0;

                nnstr.replace(/\{|\}/g, "").split(',').forEach(item=>{
                    let imgname = item.split(":")[1]+"";

                    imgname = imgname.replace(/"/g, "");
                    if(imgname){
                        arrs.push({id:++i, img_url:"http://oss.shop.eduwork.cn/"+imgname})
                    }

                });


             //   console.log(arrs);

                return arrs;
            },

        },

        mounted() {
            this.getGoodsDetail();
        },

        watch:{
            id(newv, oldv){
                if(newv != oldv) {
                    this.getGoodsDetail();
                }
            },
        },
        methods: {
            itemClick(id){
                this.id = id;
                this.$router.push({path:'/detail', query:{id}});
            },
            getGoodsDetail(){
                this.id = this.$route.query.id;

                if(this.id == undefined){
                    return
                }


                getDetail(this.id).then(res=>{
                    res.data.goods.title = JSON.parse(res.data.goods.title)[i18n.locale] ?? JSON.parse(res.data.goods.title).zh
                    res.data.goods.description = JSON.parse(res.data.goods.description)[i18n.locale] ?? JSON.parse(res.data.goods.description).zh
                    res.data.goods.details = JSON.parse(res.data.goods.details)[i18n.locale] ?? JSON.parse(res.data.goods.details).zh

                    this.goodsdetail.detail = res.data.goods;


                    const data = res.data.like_goods.map(item=>{
                        item.title = JSON.parse(item.title)[i18n.locale] ?? JSON.parse(item.title).zh
                        item.description = JSON.parse(item.description)[i18n.locale] ?? JSON.parse(item.description).zh

                        item.cover_url="http://oss.shop.eduwork.cn/" + (JSON.parse(item.cover).a ?? JSON.parse(item.cover).b);
                        return item;
                    });

                    this.goodsdetail.like_goods = data;



                })

            },

            onClickRight() {
                console.log("router");
                this.$router.back();
            },
        }

    }
</script>
<style>
    .conhtml {
        min-height: 200px;
        text-align: left;
        padding:15px !important;
    }


    .conhtml img {
        max-width: 100% !important;
        height: auto !important;

    }
    .van-card {
        border-radius: 4px;
        background-color: #181818;
        color:#FEFEFE;
        margin-left:15px;

    }

    .van-card__desc {
        color: #DEDEDE;
        font-size:12px;

    }

    .van-card__price {

        color: #DBDBDD;

    }

    .van-card__num {
        color: #BABABA;
    }

    .van-sidebar-item--select, .van-sidebar-item--select:active {
        background-color: #1F1B19 !important;
        width:82px !important;
    }

    .van-sidebar-item--select {
        color: #EFEFEF;
    }

    .van-sidebar-item--select::before {

        background-color: #FB6300;

    }

    .van-sidebar-item {

        color: #EFEFEF;
        background-color: #000000;
    }

    .van-sidebar {
        overflow-y: unset;

    }


</style>
<style scoped>
    .topswiper {
     /*   margin-top: 70px;*/
    }
    .product-box {
        background: #000000;
        color: #EFEFEF;
        padding: 1.2rem;
    }

    .product-box .price-box {
        color: #EE822F;
        margin-top: 0.4rem;
    }

    .product-box .price-box .price {
        position: relative;
    }

    .product-box .price-box .price .cur-price {
        font-size: 1.6rem;
    }
    .price .cur-price {
        color: #EE822F;
        font-size: 1.3rem;
        font-weight: 700;
    }

    .product-box .price-box .vip-price {
        display: none;
    }


       .product-name-box {
        color: #EFEFEF;
        font-size: 1.26rem;
        font-weight: 400;
        line-height: 1.6rem;
        margin-top: 0.4rem;

        word-break: break-all;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .product-box .desc {
        color: #B3B3B3;
        font-size: 1rem;
        line-height: 1.44rem;
        margin-top: 0.4rem;


        word-break: break-all;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;

    }
    .product-box .more a {
        color: #FFC000;
        margin-right: 3px;
        text-decoration: underline;
    }


    .detail-box {
        background: #121212;
        margin-top: 0.8rem;
        overflow: hidden;
        width: 100%;
    }

    .detail-title {
        font-weight: 700;
        height: 2.4rem;
        line-height: 2.4rem;
        text-align: center;
    }

    .detail-title:before, .detail-title:after {
        background: url(https://p2.qhimg.com/t0116a46853f1792e2c.png) no-repeat 0 0;
        background-size: cover;
        content: '';
        display: inline-block;
        height: 3px;
        margin-right: 0.64rem;
        position: relative;
        top: -1px;
        vertical-align: middle;
        width: 30px;
    }

    .detail-title:after {
        background-image: url(https://p3.qhimg.com/t01a9c5cb842e31ba0d.png);
        margin-left: 0.64rem;
    }

    img,p {
        -webkit-text-size-adjust: none;
        border: none;
        font-size: 100%;
        font-style: normal;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
    }


    .detail-box .detail-imgs-box p, .detail-box .detail-imgs-box img, .detail-box .detail-imgs-box .img-box, .detail-box .img-box img {
        vertical-align: middle;
        width: 100%;
        margin-top:0;
    }

    .detail-standard {

    }

    .goodslist {
        flex-grow: 1;
        background: #000000;
        padding: 15px 15px 15px 0 !important;
        flex: 1;
        position: relative;
        left: 0px;
        right: 0;
        text-align: left !important;
    }
    .goodslist .content {
        padding-top: 0px;
        position: relative;
        top:0px;
        left:0px;
        right:0;

    }


    .container {
        background-color: #000;
        /* padding: 0 30px; */

        padding-bottom: 100px;
        min-height: 1500px;
        letter-spacing: 0.00938em;
        font-size: 15px;
        color:#B3B3B3;



    }

    .van-nav-bar {
        background-color: #000;
    }

    .thumb {
        width:85px;
        height:85px;

    }
    .thumb img {
        width:85px;
        height:85px;
    }

    .desc {
        color: #B3B3B3;
        font-size: 11px;
        word-break: break-all;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;

    }

   </style>